<template>
	<div class="page-wrap">
		<div class="search-box">
		  <a-form layout="vertical" style="display:flex;">
			
			
			<a-form-item label="文章标题" style="margin-right:8px">
				<a-input   placeholder="文章标题"   style="width:200px" v-model:value="formparams.articleTitle" />
			</a-form-item>
			<a-form-item label="文章作者" style="margin-right:8px">
				<a-input   placeholder="文章作者"   style="width:200px" v-model:value="formparams.articleAnthor" />
			</a-form-item>
			<a-form-item label="文章来源" style="margin-right:8px">
				<a-input   placeholder="文章来源"   style="width:200px" v-model:value="formparams.articleSource" />
			</a-form-item>
			<a-form-item label="文章发布时间" style="margin-right:8px">
			  <a-range-picker v-model:value="formparams.time" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
			  </a-form-item>
			   <a-form-item class="no-content-label" label=".">
			       <a-button type="primary" @click="getDataList('new')" html-type="submit">查询</a-button>
			     </a-form-item>
			 
		  </a-form>
		  
		  <a-button class="add-right" @click="addnew({})" type="primary" html-type="submit">新增</a-button>
		</div>
		
		<div class="page-main" id="pagemin">
			
			<div class="page-left">
				<div class="tree-title">
					<div>当前选择: <span style="color:#1890ff">{{(seldata&&seldata.categoryName)?seldata.categoryName:'全部'}} </span></div>
					<div @click="clearsel" style="cursor:pointer;color:red">清除</div>
				</div>
				 <div class="tree-wrap">
					 <a-tree
					 v-if="treeData.length"
					    v-model:selectedKeys="selectedKeys"
					    autoExpandParent
					 	defaultExpandAll
					    :tree-data="treeData"
					 	:fieldNames="{title:'categoryName', key: 'categoryCode'}"
					   
					  >
					    
					  </a-tree>
				 </div>
			</div>
			
			<div class="page-right">
				<a-table
				:scroll="{ y: yheight }"
				  :columns="columns"
					:pagination="false"
				  :data-source="tableData"
				>
					<template #emptyText>
						<div class="table-no-data-wrap" style="margin:70px 0">
							 <img src="../../assets/metadata.png" />
							 <div style="color:#333;font-size:16px">暂无记录</div>
							 <div style="color: rgba(37,43,70,0.5);">需等待内容更新方可查看</div>
						</div>
						
					</template>
				 <template #bodyCell="{ column,record,index }">
					 
					<template v-if="column.dataIndex == 'index'">
					  {{(index+1)+(formparams.currentPage-1)*10}}
					 
					</template>
					<template v-if="column.dataIndex == 'applyCode'">
					  <span @click="showdetail(record)" style="color:#1890ff;cursor: pointer;">{{record.applyCode}}</span>
					 
					</template>
					
					
					<template v-if="column.dataIndex == 'approverName'">
					 
					  <span v-if="record.status==4">--</span>
					  <span v-else="record.status==4">{{record.approverName}}</span>
					</template>
					<template v-if="column.dataIndex == 'currentStep'">
					 
					  <span v-if="record.status==4">流程结束</span>
					  <span v-else="record.status==4">{{record.currentStep}}</span>
					</template>
					<template v-if="column.dataIndex == 'status'">
					  <span v-show="(record.status==1&&record.approveStatus==0)" style="color:#f98731">审批中</span>
					  <span v-show="(record.status==1&&record.approveStatus==9)" style="color:#f98731">审批中</span>
					  <span v-show="record.status==2">删除</span>
					  <span v-show="record.status==3&&record.approveStatus==0" style="color:red">保存</span>
					  <span v-show="record.status==3&&record.approveStatus==2" style="color:red">驳回</span>
					  <span v-show="record.status==3&&record.approveStatus==9" style="color:red">撤回</span>
					  <span v-show="record.status==4&&record.approveStatus==1" style="color:#54C651">归档</span>
					</template>
					
					  <template v-if="column.dataIndex == 'articleTitle'">
						   <a-tooltip>
						      <template #title>{{record.articleTitle}}</template>
						       <span>{{record.articleTitle.substring(0,10)}} <span v-show="record.articleTitle.length>9">...</span></span>
						    </a-tooltip>
					
					  </template>
					 
					   
				      <template v-if="column.dataIndex == 'action'">
				       <div class="operation-wrap" >
				       		 		
							<div class="table-edit-btn" style="margin-right:6px"  @click="addnew(record)">
								编辑
							</div> 
							<div @click="delClick(record)" class="table-del-btn">
								删除
							</div> 
				       		 			
				        </div>
				      </template>
				    </template>
				</a-table>
				
				<div class="footer-common">
					 <a-pagination v-model:page-size="formparams.pageSize" @change="getDataList" :show-total="total => `共 ${total} 条`" v-model:current="formparams.currentPage" :total="total" />
				</div>
				
			</div>
		</div>
	</div>
	
</template>

<script>
	const columns= [
		{
					title: "序号",
					width: 60,
					align:'center',
					dataIndex: 'index'
				  },
				{
				  title: '所属栏目',
				 
				  dataIndex: 'sp1'
				},
				{
				  title: '标题',
				  dataIndex: 'articleTitle'
				},
		 {
		   title: '作者',
		   dataIndex: 'articleAnthor'
		 },
		{
		  title: '排序',
		  dataIndex: 'sort',
		  
		},
		 {
		   title: '点击量',
		   dataIndex: 'readNum',
		   
		 },
		 {
		   title: '发布时间',
		   dataIndex: 'articleTime',
		   
		 },
		 {
		   title: '文章来源',
		   dataIndex: 'articleSource',
		   
		 },
		
		
		
	  {
	    title: '操作',
	    dataIndex: 'action',
	  	width:'140px'
	  }
	 
	];
	function getcatecode(arr,categoryCode){
		let data={}
		for(let i=0;i<arr.length;i++){
			
			if(arr[i].categoryCode==categoryCode){
				data=arr[i]
				break;
			}else if(arr[i].children.length){
				data=getcatecode(arr[i].children,categoryCode)
				if(data.categoryCode){
					break
				}
			}
			
		}
		return data
	}
	import {
		slxhapisystemarticleinfogetArticleList,
		slxhapisystemcategorygetArticleTreeList,
		slxhapisystemarticleinfodelArticleInfo
		} from '../../../api/manpart.js'
	import {defineComponent,onMounted,ref,reactive,watch } from 'vue'
	import {useRouter} from 'vue-router'
	import { Modal } from 'ant-design-vue';
	import bus from '../../bus.js'
	import dayjs from 'dayjs'
	import {useStore} from 'vuex'
	export default defineComponent({
		
		
		setup() {
			let yheight=ref(400)
			const store = useStore();
			let total=ref(0)
			let tableData=ref([])
			let seldata=ref({})
			 let treeData=ref([])
			     
			const expandedKeys = ref([]);
			    const selectedKeys = ref([]);
			    const checkedKeys = ref([]);
			    watch(expandedKeys, () => {
			      console.log('expandedKeys', expandedKeys);
			    });
			    watch(selectedKeys, () => {
					
					seldata.value=getcatecode(treeData.value,selectedKeys.value[0])
					getDataList()
					
			    });
				const clearsel=()=>{
					selectedKeys.value=[]
				}
			    watch(checkedKeys, () => {
			      console.log('checkedKeys', checkedKeys);
			    });
			    const handleExpand = (keys, {
			      expanded,
			      node,
			    }) => {
			      // node.parent add from 3.0.0-alpha.10
			      const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({
			        key,
			      }) => key);
					expandedKeys.value = keys;
			    };
			
			let formparams=reactive({
				currentPage:1,
				pageSize:10,
				"articleAnthor": "",
				time:null,
				"articleSource": "",
				"articleTitle": "",
				"categoryCode": "",
				sp1:'',
				"endTime": "",
				
				"startTime": ""
			})
			
			for(let key in store.state.seachparams){
				formparams[key]=store.state.seachparams[key]
			}
			const getheighttable=()=>{
				let pagemin=document.getElementById('pagemin')
				yheight.value=pagemin.offsetHeight-110
			}
			onMounted(()=>{
				getheighttable()
				getTreeData()
				getDataList()
				
			})
			const getDataList=(type)=>{
				if(type=='new'){
					formparams.currentPage=1
				}
				let data=JSON.parse(JSON.stringify(formparams))
				
				if(formparams.time){
					data.endTime=formparams.time[1]+'23:59:59'
					data.startTime=formparams.time[0]+'23:59:59'
				}
				data.categoryCode=selectedKeys.value[0]
				slxhapisystemarticleinfogetArticleList(data).then(e=>{
					total.value=e.object.page.totalSize
					tableData.value=e.object.dataList.map(item=>{
						item.articleTime=dayjs(new Date(item.articleTime)).format('YYYY-MM-DD HH:mm:ss')
						
						return item
					})
					
					
					if(seldata.value.type==3){
						let record=tableData.value?tableData.value[0]:{}
						addnew(record)
					}
					
				}).catch(err=>{
					console.log(err)
				})
			}
			const getTreeData=()=>{
				slxhapisystemcategorygetArticleTreeList({}).then(e=>{
					
					treeData.value=e.object.map(item=>{
						//item.label=item.categoryName
						return item
					})
					
				}).catch(err=>{
					console.log(err)
				})
			}

			const addnew=(record)=>{
				
				store.commit('seachparamsChange',formparams)
				store.commit('recordChange',record)
				bus.emit('addcontent',{isshowContent:false,record})
			}
			
			const delClick=record=>{
				 Modal.confirm({
				        title: '确定删除?',
				        content: '',
				        okText: '确定',
				        okType: 'danger',
				        cancelText: '取消',
				        onOk() {
				          slxhapisystemarticleinfodelArticleInfo({articleCode:record.articleCode}).then(e=>{
				          	
				          	getDataList()
				          	
				          }).catch(err=>{
				          	console.log(err)
				          })
				        },
				        onCancel() {
				          console.log('Cancel');
				        },
				      });
			}
			return{
				yheight,
				clearsel,
				seldata,
				total,
				delClick,
				addnew,
				getTreeData,
				tableData,
				treeData,
				columns,
				getDataList,
				      expandedKeys,
				      selectedKeys,
				      checkedKeys,
				      handleExpand,
				formparams
				
			}
		}
	})
	
</script>

<style scoped>
	.tree-title{
		border-bottom:1px solid #1890ff;
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.page-wrap{
		height:100%;
	}
	.page-main{
		height:calc( 100% - 96px);
		overflow: hidden;
		display:flex;
		padding-right:60px;
	}
	.page-right{
		height:100%;
		overflow: hidden;
		flex:1;
		padding-left:20px;
	}
	.page-left{
		width:220px;
		height:100%;
		overflow: hidden;
	}
	.tree-wrap{
		height:calc( 100% - 36px);
		overflow: auto;
	}
</style>